<template>
	<view class="order-content">
		<view class="order-body">
			<view class="order-info">
				<view class="order-title">
					<view>订单信息</view>
					<view class="order-status">
						{{orderDetail.orderStatus == 1 ? '待付款' : orderDetail.orderStatus == 2 ? '已付款' : orderDetail.orderStatus == 3 ? '待退款' : '已退款'}}
					</view>
				</view>
				<view class="order-item">
					<view>订单编号</view>
					<view>{{orderDetail.orderNo}}</view>
					<view class="copy-box" @click="copyOrderNo">复制</view>
				</view>
				<view class="order-item">
					<view>创建时间</view>
					<view>{{orderDetail.createErInfo.createTime}}</view>
				</view>
				<view class="order-item">
					<view>付款时间</view>
					<view>{{orderDetail.successTime}}</view>
				</view>
				<view class="order-item" v-if="orderDetail.orderStatus == 1">
					<view>过期时间</view>
					<view class="count-down">{{countTimeData.minute}}:{{countTimeData.second}}后自动取消</view>
				</view>
			</view>
			<view class="order-info">
				<view class="order-title">
					<view>房源信息</view>
				</view>
				<view class="house-info">
					<view class="house-image">
						<image :src="orderDetail.houseInfo.images[0]" mode=""></image>
					</view>
					<view class="house-detail">
						<view class="house-title">{{orderDetail.houseInfo.title}}</view>
						<view class="house-text">
							<view class="house-type">户型：{{orderDetail.houseInfo.tags}}</view>
							<view class="house-area">区域：{{orderDetail.houseInfo.area}}</view>
							<view class="house-fee">中介费：{{orderDetail.houseInfo.isAgency == 1 ? "有" : '无'}}</view>
						</view>
						<view class="time-price">
							<view class="hire-time">租期：{{orderDetail.skuInfo.title}}</view>
							<view class="house-price">￥{{orderDetail.skuInfo.price}}/月</view>
						</view>
					</view>
				</view>
				<view class="all-price">
					<view class="price-box" style="margin-bottom: 15rpx;">
						<view>总价</view>
						<view>￥{{orderDetail.money}}</view>
					</view>
					<view class="price-box">
						<view>实付款</view>
						<view class="true-price">￥{{orderDetail.orderStatus != 1 ? orderDetail.money : '0'}}</view>
					</view>
				</view>
			</view>
			<view class="order-info" v-if="orderDetail.orderStatus != 1">
				<view class="order-title">
					<view>三方信息</view>
				</view>
				<view class="order-item">
					<view>租户</view>
					<view>{{orderDetail.createErInfo.realName || orderDetail.createErInfo.nickName}}</view>
				</view>
				<view class="order-item">
					<view>销售员</view>
					<view>{{orderDetail.intermediaryInfo.realName || orderDetail.intermediaryInfo.nickName || '林羽晨'}}
					</view>
				</view>
				<view class="order-item">
					<view>房源商</view>
					<view>{{orderDetail.releaseInfo.realName || orderDetail.releaseInfo.nickName }}</view>
				</view>
			</view>
		</view>
		<view class="config-box">
			<view @click.stop="refund()" v-if="orderDetail.orderStatus == 2">申请退款</view>
			<view @click.stop="uploadContract()" v-if="orderDetail.orderStatus == 2">上传入住合同</view>
			<view @click.stop="gotoPay()" v-if="orderDetail.orderStatus == 1">去付款</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderDetail,
		CreateOrder
	} from '@/api/index.js'
	export default {
		data() {
			return {
				orderDetail: {},
				countTimeData: {
					// hour: 0,
					minute: 0,
					second: 0
				},
				options: {}
			}
		},
		onLoad(op) {
			console.log(op, '这里是订单详情');
			this.options = op
			this.getOrderDetail(op)
			this.countTime()
		},
		methods: {
			copyOrderNo() {
				// 判断是否支持复制功能
				if (!navigator.clipboard) {
					uni.showToast({
						title: "当前浏览器未能支持此功能，请更换浏览器",
						icon: "none",
						duration: 2000
					});
					return;
				}

				// 复制内容到剪贴板
				navigator.clipboard.writeText(this.orderDetail.orderNo).then(function() {
					uni.showToast({
						title: "复制成功",
						icon: "success",
						duration: 2000
					});
				}, function(err) {
					console.log(err, 'err');
					uni.showToast({
						title: "复制失败，请重新分享",
						icon: "none",
						duration: 2000
					});
				});
			},
			uploadContract() {
				uni.navigateTo({
					url: "/pages/checkInHouse/index?orderNo=" + this.orderDetail.orderNo
				})
			},
			refund() {
				uni.navigateTo({
					url: "/pages/orderRefund/index?orderNo=" + this.orderDetail.orderNo
				})
			},
			gotoPay() {
				let that = this
				let query = {
					houseId: that.orderDetail.houseId,
					openId: uni.getStorageSync('userInfo').openId,
					skuId: that.orderDetail.skuId,
					intermediaryId: that.orderDetail.intermediaryInfo.id || '',
					orderNo: that.orderDetail.orderNo
				}
				CreateOrder(query).then(res => {
					that.pay(res)
				})
			},
			// 支付
			pay(params) {
				WeixinJSBridge.invoke('getBrandWCPayRequest', params, res => {
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						//支付成功
						// resolve(true)
						uni.navigateTo({
							url: '/pages/houseDetail/successPay?orderNo=' + params.orderNo
						})
					} else {
						//支付失败
						// resolve(false)
						uni.showToast({
							title: "支付失败！",
							icon: 'error',
							duration: 800
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/orderDetail/index?orderNo=' + params.orderNo
							})
						}, 1000)

					}
				})
			},
			getOrderDetail(op) {
				let that = this
				OrderDetail({
					id: op.id || '',
					orderNo: op.orderNo || ''
				}).then(res => {
					that.orderDetail = res.data
					that.orderDetail.houseInfo.images = that.orderDetail.houseInfo.images.split(',')
				})
			},
			// 倒计时
			countTime() {
				var end = this.orderDetail.expirTime / 1000;
				var now = Date.parse(new Date()) / 1000;
				if (now >= end) {
					this.countTimeData = {
						// hour: 0,
						minute: 0,
						second: 0
					}
					this.getOrderDetail(this.options)
					return
				}
				let msec = end - now
				let h = parseInt(msec / 60 / 60 % 24) //算出小时数
				let m = parseInt(msec / 60 % 60) //算出分钟数
				let s = parseInt(msec % 60) //算出秒数
				this.countTimeData = {
					// hour: h > 9 ? h : "0" + h,
					minute: m > 9 ? m : '0' + m,
					second: s > 9 ? s : '0' + s
				}
				let that = this
				that.timer = setTimeout(function() {
					that.countTime()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.order-body {

		.order-info {
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;

			.order-title {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;

				.order-status {
					font-size: 28rpx;
					color: #fff;
					padding: 6rpx;
					background-color: #1296db;
					border-radius: 10rpx;
				}
			}

			.order-item {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				margin-left: 20rpx;

				.copy-box {
					color: #1296db;
				}

				.count-down {
					color: #bf0000;
					font-weight: bold;
				}
			}

			.house-info {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #eee;

				.house-image {
					>image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}
				}

				.house-detail {
					width: 100%;
					// height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.house-title {
						font-weight: bold;
					}

					.house-text {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						margin-bottom: 10rpx;

						.house-type,
						.house-area {
							padding: 6rpx;
							background-color: #1296db;
							color: #fff;
							border-radius: 10rpx;
						}

						.house-fee {
							padding: 6rpx;
							background-color: #1296db;
							color: #fff;
							border-radius: 10rpx;
						}

					}

					.time-price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;

						.hire-time {
							padding: 6rpx;
							background-color: #1296db;
							color: #fff;
							border-radius: 10rpx;
						}

						.house-price {
							color: #bf0000;
						}
					}
				}
			}

			.all-price {
				padding: 15rpx 0;

				.price-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.true-price {
						color: #bf0000;
					}
				}
			}
		}
	}

	.config-box {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		>view {
			margin-left: 20rpx;
			padding: 5rpx 20rpx;
			background-color: #1296db;
			color: #fff;
			border-radius: 15rpx;
		}
	}
</style>